<template>
    <div class="select-list" :class="{'list-has-select':hasSelect}">
        <div class="ivu-card-head" v-if="title">
            <div v-html="title"></div>
            <div class="float-right btn-cancel" @click="cancelClick" v-if="cancel">{{clearText}}</div>
        </div>
        <!---->
        <div class="ivu-card-body select-list-body">
            <div class="search-line" v-if="hasFilter">
                <searchInput @trigger="filter"></searchInput>
            </div>
            <div class="spin-wrapper" v-show="loading">
                <Spin size="large" fix></Spin>
            </div>
            <div class="selct-list-wrapper">
                <div class="select-list-content">
                    <template v-if="listData && listData.length">
                        <div v-for="(item,index) in listData" class="list-item" :class="rowClass(index)" :key="item.id" @click="selectRow({data:item,index})">
                            <slot name="option" :item="item" :index="index">
                              <span v-html="itemRender(item)"></span>
                            </slot>
                            <slot name="optrate" :item="item" :index="index">
                            </slot>
                            <div class="serial-box" v-if="hasSerial">
                                <Button size="small" type="text" icon="arrow-up-b" @click="rowUpClick(index)"></Button>
                                <Button size="small" type="text" icon="arrow-down-b" @click="rowDownClick(index)"></Button>
                            </div>
                        </div>
                    </template>
                    <div v-else class="text-nodata">
                        暂无数据
                    </div>
                </div>
            </div>
            <div class="page-line" v-if="hasPage && pageCount>0">
                <Page :total="totalCount" :current="pageOn" :pageSize="pageSize" @on-change="fetch" size="small"></Page>
            </div>
        </div>
    </div>
</template>
<script>
import moduleStore from "./store";
import Action from "mixins/action";
import searchInput from "@/element/searchInput";
import $ from "@/common";
export default {
  moduleStore,
  mixins: [Action],
  props: {
    title: {},
    model: {},
    cancel: {},
    hasPage: {
      default: true
    },
    tpl: {
      default: "${name}"
    },
    hasSerial: {},
    //单选项
    hasSelect: {
      default: true
    },
    //filter查询数据放在是否放在post request body 中
    jsonFilter: {
      default: true
    },
    initLoad: {
      default: false
    },
    initModel: {
      default: false
    },
    hasFilter: {},
    clearText: {
      default: "取消"
    }
  },
  data() {
    return {
      selectIndex: null,
      value: null
    };
  },
  watch: {
    data: {
      handler() {
        this.setData($.copyJson(this.data));
      }
    }
  },
  computed: {},
  created() {
    this.setBodyFilter(this.jsonFilter);
    if (!this.jsonFilter) this.setFetchMethod("get");
    if (this.hasSerial) {
      this.setSerialSort(true);
    }
    if (this.initModel) {
      this.setPath(this.model.path);
    }
    if (this.initLoad) {
      this.fetch();
    }
  },
  methods: {
    selectRow({ data, index }) {
      if (this.hasSelect && index !== this.selectIndex) {
        this.selectIndex = index;
        this.$emit("select", { data, index });
      }
    },
    cancelClick() {
      this.selectIndex = null;
      this.$emit("select", { index: null });
    },
    itemRender(item) {
      return $.composeValue(this.tpl, item);
    },
    rowClass(index) {
      return index === this.selectIndex ? "active" : "";
    },
    rowUpClick(index) {
      this.rowUp(index);
      this.$emit("rowSort", {
        index,
        direct: true
      });
    },
    rowDownClick(index) {
      this.rowdown(index);
      this.$emit("rowSort", {
        index,
        direct: false
      });
    }
  },
  components: {
    searchInput
  }
};
</script>
<style lang="less">
.ivu-card-head {
  position: relative;
  .btn-cancel {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px;
    color: #2d8cf0;
    cursor: pointer;
  }
}
</style>
